<template>
	<view class="body">
		<view class="information">
			<view class="informationForm" style="margin-bottom: 24rpx;justify-content: space-between;">
				<p class="leftTitle">头像</p>
				<view class="flex">
					<view class="avatar-container">
						<button class="avatar-wrapper" @click="chooseImage">
							<image class="avatar" :src='userInfo.avatar'></image>
							<!-- <image class="upAvatar" src="../../../static/myImages/upAvatar.png" mode=""></image> -->
						</button>
					</view>
					<u-icon size="10" name="arrow-right" color="#637697"></u-icon>
				</view>
			</view>
			<view style="height: 1rpx;background-color:#E5E5E5;"></view>
			<view class="informationForm">
				<p class="leftTitle">昵称</p>
				<input class="rightInput" v-model="userInfo.nickname" type="text" placeholder="请输入昵称" />
			</view>
			<view style="height: 1rpx;background-color:#E5E5E5;"></view>
			<view class="informationForm">
				<p class="leftTitle">真实姓名</p>
				<input class="rightInput" v-model="userInfo.realName" type="text" placeholder="请输入真实姓名" />
			</view>
			<view style="height: 1rpx;background-color:#E5E5E5;"></view>
			<view class="informationForm">
				<p class="leftTitle">性别</p>
				<picker class="rightInput" :value="userInfo.sex" range-key="name" :range="sexOptions"
					@change="bindSexChange" style="padding-right: 14rpx;">
					{{ getSexName(userInfo.sex) }}
				</picker>
				<u-icon size="10" name="arrow-right" color="#637697"></u-icon>
			</view>
			<!-- <view style="height: 1rpx;background-color:#E5E5E5;"></view>
			<view class="informationForm">
				<p class="leftTitle">生日</p>
				<picker class="rightInput" mode="date" :value="userInfo.birthday" @change="bindDateChange">
					<view>{{userInfo.birthday || '请选择日期'}}</view>
				</picker>
			</view> -->
			<view style="height: 1rpx;background-color:#E5E5E5;"></view>
			<view class="informationForm">
				<p class="leftTitle">手机号</p>
				<input class="rightInput" disabled v-model="userInfo.account" type="text" placeholder="" />
			</view>
			<view style="height: 1rpx;background-color:#E5E5E5;"></view>
		</view>
		
		<view class="bottomButton">
			<button @click="submitForm" class="submit-button01">保存修改</button>
			<button @click="signOut" class="submit-button02">退出登录</button>
		</view>
		
	</view>
</template>

<script>
	import {
		getUserInfo,
		postEditUser
	} from '@/api/user.js';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	export default {
		components: {},
		data() {
			return {
				userInfo: {},
				sexOptions: [{
						name: '未知',
						value: '0'
					},
					{
						name: '男',
						value: '1'
					},
					{
						name: '女',
						value: '2'
					},
					{
						name: '保密',
						value: '3'
					}
				],
			};
		},
		onLoad() {
			this.getUserList();
		},
		methods: {
			//上传
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.uploadImage(tempFilePath);
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			uploadImage(filePath) {
				uploadImage(filePath, 'avatars/', (url) => {
					this.userInfo.avatar = url;
					uni.showToast({
						title: '头像上传成功',
					});
				}, (error) => {
					uni.showToast({
						title: '头像上传失败: ' + error.message,
					});
				});
			},
			//获取用户信息
			getUserList() {
				getUserInfo().then(res => {
					this.userInfo = res.data;
				});
			},
			//性别
			bindSexChange(e) {
				const index = e.detail.value;
				this.userInfo.sex = this.sexOptions[index].value;
			},
			getSexName(sexId) {
				let that = this
				for (var i = 0; i < that.sexOptions.length; i++) {
					console.log(that.sexOptions[i], sexId, "sexId")
					if (that.sexOptions[i].value == sexId) {
						console.log(that.sexOptions[i].value)
						return that.sexOptions[i].name;
					}
				}
			},
			//生日
			bindDateChange(e) {
				this.userInfo.birthday = e.target.value;
			},
			//提交
			submitForm() {
				console.log(this.userInfo);
				if (!this.userInfo.nickname || !this.userInfo.realName || !this.userInfo.sex ) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				postEditUser(this.userInfo).then(() => {
					getUserInfo().then(res => {
						this.userInfo = res.data;
						this.$store.commit("UPDATE_USERINFO", {
							userInfo: res.data
						});
					});
					uni.showToast({
						title: '信息更新成功',
					});
				}).catch((error) => {
					console.error('更新用户信息失败:', error);
					uni.showToast({
						title: '信息更新失败',
					});
				});
			},
			signOut() {
				// store.commit("LOGOUT")
				try {
					uni.removeStorageSync('USER_INFO');
					uni.removeStorageSync('LOGIN_STATUS_TOKEN');
				} catch (error) {
					console.error('Error clearing local storage:', error);
				}

				uni.navigateTo({
					url: '/pages/users/wechat_login/index'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		min-height: 100vh;
		background-color: #F7F7F7;
		padding: 24rpx 32rpx;
	}

	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 42rpx;
		color: #333333;
		line-height: 106rpx;
	}

	.avatar-wrapper {
		padding-left: 0;
		padding-right: 0;
		height: 100rpx;
		line-height: 100rpx;
		background-color: transparent;
		border-color: transparent;
		
	}

	.avatar-wrapper::after {
		border: none;
	}

	.avatar-container {
		position: relative;
		// margin: 60rpx auto;
		width: 100rpx;
		height: 100rpx;
		margin-right: 14rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;

		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.upAvatar {
		position: absolute;
		bottom: 4rpx;
		right: 4rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.information {
		width: 700rpx;
		min-height: 420rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		padding: 32rpx 24rpx 32rpx 24rpx;

		.informationForm {
			width: 649rpx;
			height: 107rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.leftTitle {
				width: 197rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				font-weight: 600;
				line-height: 107rpx;
				text-align: left;
				font-style: normal;
			}

			.rightInput {
				width: 460rpx;
				height: 107rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				line-height: 107rpx;
				text-align: right;
				font-style: normal;
			}
		}

		

	}
	.bottomButton {
		margin-top: 120rpx;
	
		.submit-button01 {
			width: 686rpx;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			background: #0077FF;
			box-shadow: 0px 6px 12px 0px rgba(204,204,204,0.1569);
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	
		.submit-button02 {
			width: 686rpx;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0px 6px 12px 0px rgba(204,204,204,0.1569);
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #FF0404;
			margin-top: 40rpx;
		}
	}
</style>